<template>
  <div
    v-if="attributeTabsModel"
    class="v-station-attribute-tabs"
    :style="{ height: styleHeightDisabled ? `${attributeTabsModel.data.height}px` : '' }"
  >
    <el-tabs
      :key="attributeTabsModel.data.modelData?.id"
      v-model="attributeTabsModel.data.activeTab"
      type="card"
      class="g-panel-tabs"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        v-for="item in attributeTabsModel.getVisibleTabs()"
        :key="item.key"
        :label="$t(item.name)"
        :name="item.key"
        lazy
      >
        <template #label>
          <m-tab-item :label="$t(item.name)" />
        </template>
        <component :is="item.comp"></component>
      </el-tab-pane>
    </el-tabs>
    <div
      class="_attr-drag-line"
      @mousedown="handleMouseDown"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import MTabItem from "@/modules/model/comps/common/TabItem.vue";
import { ref, computed, provide, watch } from "vue";
import { AttributeTabKey, BusEvent } from "@/constants/Enums";
import { useEvents } from "@/common/useEvents";
import { TabsPaneContext } from "element-plus";
import { ModelData } from "@/constants/types";
import { showDetailTermCommon } from "@/modules/model/service/termBankService";

const isModelDisabled = computed(() => attributeTabsModel.value?.data.isModelDisabled);
provide("isModelDisabled", isModelDisabled);

const styleHeightDisabled = ref(true);
// const attributeTabsModel = app.activeProject!.attributeTabsModel;
const attributeTabsModel = computed(() => app.activeProject?.attributeTabsModel);

function handleMouseDown(event: MouseEvent) {
  if (!attributeTabsModel.value) return;
  attributeTabsModel.value.data.mouseStartY = event.clientY;
  attributeTabsModel.value.data.originHeight = attributeTabsModel.value.data.height;
  window.addEventListener("mousemove", handleMouseMove);
  window.addEventListener("mouseup", handleMouseUp);
}
function handleMouseUp() {
  window.removeEventListener("mousemove", handleMouseMove);
  window.removeEventListener("mouseup", handleMouseUp);
}

function handleMouseMove(event: MouseEvent) {
  if (!attributeTabsModel.value) return;
  styleHeightDisabled.value = true;
  const mouseEndY = event.clientY;
  let changeHeight = mouseEndY - attributeTabsModel.value.data.mouseStartY;
  let height = attributeTabsModel.value.data.originHeight - changeHeight;
  attributeTabsModel.value.data.hasDragged = true;

  attributeTabsModel.value.updateTabsHeight(height);
}
watch(
  () => app.global.mainWindowHeight,
  () => {
    if (!attributeTabsModel.value) return;
    attributeTabsModel.value.updateTabsHeight(attributeTabsModel.value.data.height);
  }
);

watch(
  () => app.global.zoomLevel,
  () => {
    styleHeightDisabled.value = app.global.zoomLevel > 2 ? false : true; // 缩放因数大于2时，让v-station-attribute-tabs的height为100%，防止高度溢出
    setTimeout(() => {
      if (!attributeTabsModel.value) return;
      attributeTabsModel.value.updateTabsHeight(attributeTabsModel.value.data.height);
    }, 100);
  }
);

const events = {
  [BusEvent.CHANGE_MODEL_DETAIL]: (modelId: string, projectId: string, modelIds?: string[]) => {
    if (app.global.connecting) return; // 如果是正在连线，则不需要查询属性列表

    projectId = projectId || (app.activeProject?.id as string);
    if (!attributeTabsModel.value) return;
    attributeTabsModel.value.onCurModelChange(projectId, modelId, modelIds);
  },

  [BusEvent.REFRESH_PROPERTY]: () => {
    if (!attributeTabsModel.value) return;
    attributeTabsModel.value.freshTableData();
  },
  [BusEvent.JAVA_MODEL_CHANGE]: () => {
    if (!attributeTabsModel.value) return;
    if (!attributeTabsModel.value.ignoreJavaModelChange) {
      attributeTabsModel.value.freshTableData();
    }
  },

  [BusEvent.DELETE_MODEL]: (model: ModelData) => {
    if (!attributeTabsModel.value) return;
    if (
      model.id === attributeTabsModel.value.data.modelId ||
      (attributeTabsModel.value.data.modelIds && attributeTabsModel.value.data.modelIds.indexOf(model.id) > -1)
    ) {
      attributeTabsModel.value.clearData();
    }
  },

  [BusEvent.SHOW_DETAIL_TERM]: (event: MouseEvent, termText: string) => {
    showDetailTermCommon(event, termText);
  },
  [BusEvent.SHOW_COMMENT]: () => {
    if (attributeTabsModel.value?.data.activeTab === AttributeTabKey.Properties) {
      // 批注未加载过加载批注
      attributeTabsModel.value.propertyPaneModel.loadDataWhenNotLoad();
    }
  },
  [BusEvent.FILTER_COMMENT]: () => {
    // 刷新批注内容
    if (attributeTabsModel.value?.data.activeTab === AttributeTabKey.Properties) {
      attributeTabsModel.value?.propertyPaneModel.loadTableComment();
    }
  }
};

useEvents(events);
watch(
  () => [app.isAppActive, app.global.user, app.activeProject?.config?.onlineConfig?.packageStatus],
  () => {
    if (!attributeTabsModel.value) return;
    const { projectId, modelId } = attributeTabsModel.value.data;
    if (projectId && modelId) {
      attributeTabsModel.value.updateModelDisabled(projectId, modelId);
    }
  }
);

async function handleTabClick(tab: TabsPaneContext) {
  if (!attributeTabsModel.value) return;
  await attributeTabsModel.value.changeActiveTab(tab.props.name as string);
}
</script>
<style lang="scss">
.v-station-attribute-tabs {
  position: relative;
  height: 100%;
  padding-top: 4px;

  ._attr-drag-line {
    position: absolute;
    height: 5px;
    width: 100%;
    background: transparent;
    top: 0px;
    left: 0;
    cursor: ns-resize;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    z-index: 1;
  }
}
</style>
